<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心 - 1024导航管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        danger: '#EF4444'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .help-nav-active {
                @apply bg-primary/10 text-primary;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800 flex h-screen overflow-hidden">
    <!-- 侧边栏导航 -->
    <aside
        class="w-64 bg-white shadow-sm h-full border-r border-gray-200 flex-shrink-0 hidden md:block overflow-y-auto">
        <div class="p-4 border-b border-gray-100">
            <div class="text-primary text-xl font-bold">1024<span class="text-secondary">管理后台</span></div>
        </div>

        <nav class="p-4 space-y-1">
            <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                <i class="fa fa-tachometer w-5 text-center mr-3"></i>
                <span>控制台</span>
            </a>
            <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                <i class="fa fa-th-large w-5 text-center mr-3"></i>
                <span>资源管理</span>
            </a>
            <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                <i class="fa fa-wrench w-5 text-center mr-3"></i>
                <span>工具管理</span>
            </a>
            <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                <i class="fa fa-users w-5 text-center mr-3"></i>
                <span>用户管理</span>
            </a>
            <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                <i class="fa fa-comments w-5 text-center mr-3"></i>
                <span>社区内容</span>
            </a>
            <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                <i class="fa fa-line-chart w-5 text-center mr-3"></i>
                <span>数据统计</span>
            </a>

            <div class="border-t border-gray-100 my-3"></div>

            <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                <i class="fa fa-cog w-5 text-center mr-3"></i>
                <span>系统设置</span>
            </a>
            <a href="#" class="flex items-center px-4 py-3 text-sm sidebar-active rounded">
                <i class="fa fa-question-circle w-5 text-center mr-3"></i>
                <span>帮助中心</span>
            </a>
        </nav>
    </aside>

    <!-- 主内容区 -->
    <div class="flex-1 flex flex-col overflow-hidden">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm h-16 border-b border-gray-200 flex items-center justify-between px-6">
            <div class="flex items-center">
                <button class="md:hidden mr-4 text-gray-600">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-lg font-semibold">帮助中心</h1>
            </div>

            <div class="flex items-center space-x-4">
                <div class="relative">
                    <button class="text-gray-600 hover:text-primary transition-colors relative">
                        <i class="fa fa-bell text-xl"></i>
                        <span
                            class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">3</span>
                    </button>
                </div>

                <div class="relative group">
                    <button class="flex items-center space-x-2">
                        <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像"
                            class="w-8 h-8 rounded-full object-cover">
                        <span class="text-sm font-medium hidden md:inline-block">管理员</span>
                        <i class="fa fa-angle-down text-gray-500"></i>
                    </button>
                    <div
                        class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 hidden group-hover:block">
                        <a href="profile.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                        <a href="settings.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">账号设置</a>
                        <div class="border-t border-gray-100 my-1"></div>
                        <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                    </div>
                </div>
            </div>
        </header>

        <!-- 页面内容 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
            <div class="max-w-7xl mx-auto">
                <!-- 搜索帮助 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h2 class="text-lg font-semibold mb-4">搜索帮助</h2>
                    <div class="relative">
                        <input type="text" placeholder="输入关键词搜索帮助文档..."
                            class="w-full px-5 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                        <button
                            class="absolute right-2 top-2 bottom-2 px-4 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                            <i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- 帮助分类导航 -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
                    <div class="md:col-span-1">
                        <div class="bg-white rounded-xl shadow-sm p-5 sticky top-24">
                            <h3 class="font-semibold mb-4">帮助分类</h3>
                            <ul class="space-y-1">
                                <li>
                                    <a href="#"
                                        class="help-nav-active block px-4 py-2.5 text-sm rounded-md transition-colors">
                                        资源管理
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                                        用户管理
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                                        内容审核
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                                        系统设置
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                                        数据统计
                                    </a>
                                </li>
                                <li>
                                    <a href="#"
                                        class="block px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 rounded-md transition-colors">
                                        常见问题
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 帮助内容 -->
                    <div class="md:col-span-3 space-y-6">
                        <!-- 资源管理帮助 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold mb-4">资源管理</h3>

                            <div class="space-y-6">
                                <div>
                                    <h4 class="font-medium text-gray-900 mb-2">如何添加新资源？</h4>
                                    <div class="pl-4 border-l-2 border-gray-200 text-gray-700">
                                        <p class="mb-2">1. 在资源管理页面，点击右上角的"添加资源"按钮。</p>
                                        <p class="mb-2">2. 填写资源信息，包括资源名称、链接、描述、分类等。</p>
                                        <p class="mb-2">3. 上传资源缩略图（可选）。</p>
                                        <p>4. 点击"提交"按钮完成添加，新资源将自动进入待审核状态。</p>
                                    </div>
                                </div>

                                <div>
                                    <h4 class="font-medium text-gray-900 mb-2">如何编辑现有资源？</h4>
                                    <div class="pl-4 border-l-2 border-gray-200 text-gray-700">
                                        <p class="mb-2">1. 在资源列表中找到需要编辑的资源。</p>
                                        <p class="mb-2">2. 点击操作列中的"编辑"按钮（铅笔图标）。</p>
                                        <p class="mb-2">3. 在编辑页面修改相关信息。</p>
                                        <p>4. 点击"保存"按钮提交修改。</p>
                                    </div>
                                </div>

                                <div>
                                    <h4 class="font-medium text-gray-900 mb-2">如何删除资源？</h4>
                                    <div class="pl-4 border-l-2 border-gray-200 text-gray-700">
                                        <p class="mb-2">1. 在资源列表中找到需要删除的资源。</p>
                                        <p class="mb-2">2. 点击操作列中的"删除"按钮（垃圾桶图标）。</p>
                                        <p class="mb-2">3. 在确认对话框中点击"确认"。</p>
                                        <p class="text-danger text-sm">注意：删除操作不可恢复，请谨慎操作。</p>
                                    </div>
                                </div>

                                <div>
                                    <h4 class="font-medium text-gray-900 mb-2">如何审核用户提交的资源？</h4>
                                    <div class="pl-4 border-l-2 border-gray-200 text-gray-700">
                                        <p class="mb-2">1. 在控制台首页点击"待审核资源"快捷入口，或在资源管理页面筛选"待审核"状态。</p>
                                        <p class="mb-2">2. 点击资源标题查看详情。</p>
                                        <p class="mb-2">3. 审核资源内容是否符合平台规范。</p>
                                        <p class="mb-2">4. 点击"通过"或"拒绝"按钮完成审核。</p>
                                        <p>5. 如拒绝审核，建议填写拒绝原因，帮助用户了解问题所在。</p>
                                    </div>
                                </div>

                                <div>
                                    <h4 class="font-medium text-gray-900 mb-2">如何批量操作资源？</h4>
                                    <div class="pl-4 border-l-2 border-gray-200 text-gray-700">
                                        <p class="mb-2">1. 在资源列表页面，勾选需要操作的资源前的复选框。</p>
                                        <p class="mb-2">2. 点击列表上方的"批量操作"下拉菜单。</p>
                                        <p class="mb-2">3. 选择需要执行的操作（批量删除、批量通过、批量拒绝等）。</p>
                                        <p>4. 在确认对话框中点击"确认"执行操作。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 视频教程 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold mb-4">视频教程</h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div
                                    class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                                    <div class="aspect-video bg-gray-100 relative flex items-center justify-center">
                                        <i class="fa fa-play-circle text-primary text-5xl"></i>
                                        <span
                                            class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">05:32</span>
                                    </div>
                                    <div class="p-4">
                                        <h4 class="font-medium mb-1">资源审核流程演示</h4>
                                        <p class="text-gray-500 text-sm">学习如何高效审核用户提交的资源</p>
                                    </div>
                                </div>
                                <div
                                    class="border border-gray-100 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                                    <div class="aspect-video bg-gray-100 relative flex items-center justify-center">
                                        <i class="fa fa-play-circle text-primary text-5xl"></i>
                                        <span
                                            class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">08:15</span>
                                    </div>
                                    <div class="p-4">
                                        <h4 class="font-medium mb-1">资源批量管理技巧</h4>
                                        <p class="text-gray-500 text-sm">掌握批量操作提升工作效率</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 常见问题 -->
                        <div class="bg-white rounded-xl shadow-sm p-6">
                            <h3 class="text-lg font-semibold mb-4">常见问题</h3>

                            <div class="space-y-4">
                                <div class="border border-gray-100 rounded-lg overflow-hidden">
                                    <button
                                        class="faq-toggle w-full flex justify-between items-center p-4 text-left focus:outline-none">
                                        <span class="font-medium">为什么我无法删除某些资源？</span>
                                        <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                                    </button>
                                    <div class="faq-content hidden px-4 pb-4 text-gray-600">
                                        <p>如果资源被标记为"官方推荐"或有大量用户收藏，系统会限制直接删除操作。您可以先取消官方推荐状态或联系超级管理员获取删除权限。</p>
                                    </div>
                                </div>

                                <div class="border border-gray-100 rounded-lg overflow-hidden">
                                    <button
                                        class="faq-toggle w-full flex justify-between items-center p-4 text-left focus:outline-none">
                                        <span class="font-medium">如何处理重复提交的资源？</span>
                                        <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                                    </button>
                                    <div class="faq-content hidden px-4 pb-4 text-gray-600">
                                        <p>系统会自动检测URL重复的资源。对于内容相似但URL不同的资源，建议保留质量更高的版本，并在拒绝其他版本时选择"内容重复"原因。</p>
                                    </div>
                                </div>

                                <div class="border border-gray-100 rounded-lg overflow-hidden">
                                    <button
                                        class="faq-toggle w-full flex justify-between items-center p-4 text-left focus:outline-none">
                                        <span class="font-medium">资源分类可以自定义吗？</span>
                                        <i class="fa fa-chevron-down text-gray-400 transition-transform"></i>
                                    </button>
                                    <div class="faq-content hidden px-4 pb-4 text-gray-600">
                                        <p>管理员可以在"系统设置 > 分类管理"中添加、编辑或删除资源分类。修改会实时反映在前台和后台的所有相关页面。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 联系支持 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-4">需要更多帮助？</h3>
                    <p class="text-gray-600 mb-4">如果您在使用过程中遇到其他问题，欢迎联系技术支持团队</p>

                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#"
                            class="flex items-center justify-center px-4 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                            <i class="fa fa-envelope mr-2"></i> 发送支持请求
                        </a>
                        <a href="#"
                            class="flex items-center justify-center px-4 py-2.5 border border-gray-300 bg-white text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                            <i class="fa fa-book mr-2"></i> 查看完整文档
                        </a>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>

<script>
    // 移动端侧边栏切换
    const menuButton = document.querySelector('button.md\\:hidden');
    const sidebar = document.querySelector('aside');

    menuButton.addEventListener('click', function () {
        sidebar.classList.toggle('hidden');
        sidebar.classList.toggle('fixed');
        sidebar.classList.toggle('z-50');
        sidebar.classList.toggle('w-64');
    });

    // FAQ 折叠功能
    const faqToggles = document.querySelectorAll('.faq-toggle');

    faqToggles.forEach(toggle => {
        toggle.addEventListener('click', () => {
            const content = toggle.nextElementSibling;
            const icon = toggle.querySelector('i');

            content.classList.toggle('hidden');
            icon.classList.toggle('rotate-180');
        });
    });
</script>

</html>